<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>药物作用与相克关系查询系统 - 医护端</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            warning: '#FF7D00',
            danger: '#F53F3F',
            success: '#00B42A',
            neutral: {
              100: '#F2F3F5',
              200: '#E5E6EB',
              300: '#C9CDD4',
              400: '#86909C',
              500: '#4E5969',
              600: '#272E3B',
              700: '#1D2129',
            }
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-hide {
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .text-shadow {
        text-shadow: 0 1px 2px rgba(0,0,0,0.1);
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
      }
    }
  </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-700 min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300" id="main-header">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between h-16">
        <!-- 品牌标识 -->
        <div class="flex items-center space-x-3">
          <div class="bg-primary text-white p-2 rounded-lg">
            <i class="fa fa-medkit text-xl"></i>
          </div>
          <div>
            <h1 class="text-lg md:text-xl font-bold text-primary">药物作用与相克关系查询系统</h1>
            <p class="text-xs text-neutral-400 hidden md:block">医护专业版 v2.3.1</p>
          </div>
        </div>
        
        <!-- 搜索框 - 中等屏幕以上显示 -->
        <div class="hidden md:flex relative flex-1 max-w-xl mx-8">
          <input type="text" placeholder="搜索药物名称、成分或适应症..." 
                 class="w-full pl-10 pr-4 py-2 rounded-full border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all">
          <i class="fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400"></i>
        </div>
        
        <!-- 用户区域 -->
        <div class="flex items-center space-x-4">
          <button class="relative p-2 text-neutral-500 hover:text-primary transition-colors">
            <i class="fa fa-bell-o"></i>
            <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
          </button>
          <div class="flex items-center space-x-2 cursor-pointer group">
            <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
            <span class="hidden md:inline font-medium">张医生</span>
            <i class="fa fa-angle-down text-neutral-400 text-xs group-hover:text-primary transition-colors"></i>
          </div>
        </div>
      </div>
    </div>
  </header>

  <!-- 移动端搜索栏 -->
  <div class="md:hidden bg-white border-t border-neutral-200 p-3 sticky top-16 z-40">
    <div class="relative">
      <input type="text" placeholder="搜索药物..." 
             class="w-full pl-10 pr-4 py-2 rounded-full border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all">
      <i class="fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400"></i>
    </div>
  </div>

  <!-- 主内容区 -->
  <main class="flex-1 container mx-auto px-4 py-6">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
      <!-- 左侧边栏 -->
      <div class="lg:col-span-1">
        <!-- 功能导航 -->
        <div class="bg-white rounded-xl shadow-sm mb-6">
          <div class="p-4 border-b border-neutral-100">
            <h2 class="font-semibold text-neutral-700">功能导航</h2>
          </div>
          <nav>
            <ul>
              <li>
                <a href="#" class="flex items-center space-x-3 px-4 py-3 text-primary bg-primary/5 border-l-4 border-primary">
                  <i class="fa fa-search text-lg w-5 text-center"></i>
                  <span>药物查询</span>
                </a>
              </li>
              <li>
                <a href="#" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-colors">
                  <i class="fa fa-exchange text-lg w-5 text-center"></i>
                  <span>相互作用分析</span>
                </a>
              </li>
              <li>
                <a href="#" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-colors">
                  <i class="fa fa-heartbeat text-lg w-5 text-center"></i>
                  <span>禁忌症查询</span>
                </a>
              </li>
              <li>
                <a href="#" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-colors">
                  <i class="fa fa-history text-lg w-5 text-center"></i>
                  <span>查询历史</span>
                </a>
              </li>
              <li>
                <a href="#" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-colors">
                  <i class="fa fa-star-o text-lg w-5 text-center"></i>
                  <span>我的收藏</span>
                </a>
              </li>
            </ul>
          </nav>
        </div>
        
        <!-- 药物分类 -->
        <div class="bg-white rounded-xl shadow-sm mb-6">
          <div class="p-4 border-b border-neutral-100">
            <h2 class="font-semibold text-neutral-700">药物分类</h2>
          </div>
          <div class="p-3">
            <ul class="space-y-1">
              <li>
                <a href="#" class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-neutral-50 transition-colors">
                  <span class="flex items-center space-x-2">
                    <i class="fa fa-stethoscope text-primary"></i>
                    <span>抗生素类</span>
                  </span>
                  <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">128</span>
                </a>
              </li>
              <li>
                <a href="#" class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-neutral-50 transition-colors">
                  <span class="flex items-center space-x-2">
                    <i class="fa fa-heart text-danger"></i>
                    <span>心血管药物</span>
                  </span>
                  <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">96</span>
                </a>
              </li>
              <li>
                <a href="#" class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-neutral-50 transition-colors">
                  <span class="flex items-center space-x-2">
                    <i class="fa fa-brain text-warning"></i>
                    <span>神经系统药物</span>
                  </span>
                  <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">74</span>
                </a>
              </li>
              <li>
                <a href="#" class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-neutral-50 transition-colors">
                  <span class="flex items-center space-x-2">
                    <i class="fa fa-capsules text-success"></i>
                    <span>消化系统药物</span>
                  </span>
                  <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">62</span>
                </a>
              </li>
              <li>
                <a href="#" class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-neutral-50 transition-colors">
                  <span class="flex items-center space-x-2">
                    <i class="fa fa-plus-circle text-secondary"></i>
                    <span>激素类药物</span>
                  </span>
                  <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">48</span>
                </a>
              </li>
            </ul>
            <button class="w-full mt-3 text-primary text-sm hover:text-primary/80 transition-colors flex items-center justify-center">
              查看全部分类 <i class="fa fa-angle-right ml-1"></i>
            </button>
          </div>
        </div>
        
        <!-- 用药安全提示 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
          <div class="bg-primary/10 p-4 border-b border-primary/20">
            <h2 class="font-semibold text-primary flex items-center">
              <i class="fa fa-exclamation-circle mr-2"></i> 用药安全提示
            </h2>
          </div>
          <div class="p-4 space-y-3">
            <div class="flex items-start space-x-3">
              <div class="bg-danger/10 p-2 rounded-full text-danger mt-0.5">
                <i class="fa fa-ban"></i>
              </div>
              <div>
                <h3 class="font-medium text-neutral-700">严重相互作用</h3>
                <p class="text-sm text-neutral-500">最近7天报告了12起华法林与阿司匹林联用导致的出血事件</p>
              </div>
            </div>
            <div class="flex items-start space-x-3">
              <div class="bg-warning/10 p-2 rounded-full text-warning mt-0.5">
                <i class="fa fa-exclamation-triangle"></i>
              </div>
              <div>
                <h3 class="font-medium text-neutral-700">剂量调整提醒</h3>
                <p class="text-sm text-neutral-500">肾功能不全患者使用万古霉素需调整剂量</p>
              </div>
            </div>
            <a href="#" class="text-primary text-sm hover:underline flex items-center justify-center mt-2">
              查看更多安全警示 <i class="fa fa-angle-right ml-1"></i>
            </a>
          </div>
        </div>
      </div>
      
      <!-- 右侧主内容 -->
      <div class="lg:col-span-3 space-y-6">
        <!-- 快速查询工具 -->
        <div class="bg-white rounded-xl shadow-sm p-6">
          <h2 class="text-lg font-semibold mb-4">药物相互作用查询</h2>
          <div class="space-y-4">
            <div class="flex flex-col md:flex-row gap-4">
              <div class="flex-1 relative">
                <input type="text" placeholder="添加第一种药物..." 
                       class="w-full pl-4 pr-10 py-3 rounded-lg border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all">
                <button class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-danger transition-colors">
                  <i class="fa fa-times-circle"></i>
                </button>
              </div>
              <div class="flex-1 relative">
                <input type="text" placeholder="添加第二种药物..." 
                       class="w-full pl-4 pr-10 py-3 rounded-lg border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all">
                <button class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-danger transition-colors">
                  <i class="fa fa-times-circle"></i>
                </button>
              </div>
            </div>
            <div class="flex flex-wrap gap-2">
              <span class="inline-flex items-center px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">
                阿司匹林 <button class="ml-2 text-primary/70 hover:text-primary"><i class="fa fa-times-circle"></i></button>
              </span>
              <span class="inline-flex items-center px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">
                氯吡格雷 <button class="ml-2 text-primary/70 hover:text-primary"><i class="fa fa-times-circle"></i></button>
              </span>
              <button class="flex items-center px-3 py-1 border border-dashed border-neutral-300 text-neutral-500 rounded-full text-sm hover:border-primary hover:text-primary transition-colors">
                <i class="fa fa-plus mr-1"></i> 添加更多药物
              </button>
            </div>
            <button class="w-full md:w-auto bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-colors shadow-sm hover:shadow flex items-center justify-center">
              <i class="fa fa-search mr-2"></i> 分析相互作用
            </button>
          </div>
        </div>
        
        <!-- 热门药物 -->
        <div>
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold">热门查询药物</h2>
            <a href="#" class="text-primary text-sm hover:underline">查看全部</a>
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            <!-- 药物卡片1 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
              <div class="p-4">
                <div class="flex justify-between items-start mb-3">
                  <div>
                    <h3 class="font-semibold text-neutral-800">阿司匹林</h3>
                    <p class="text-xs text-neutral-500">非甾体抗炎药</p>
                  </div>
                  <button class="text-neutral-400 hover:text-warning transition-colors">
                    <i class="fa fa-star-o"></i>
                  </button>
                </div>
                <div class="space-y-2 mb-4">
                  <div class="flex items-center text-sm">
                    <span class="w-24 text-neutral-500">主要作用：</span>
                    <span class="text-neutral-700">解热、镇痛、抗血小板</span>
                  </div>
                  <div class="flex items-center text-sm">
                    <span class="w-24 text-neutral-500">常见剂型：</span>
                    <span class="text-neutral-700">片剂(100mg)</span>
                  </div>
                </div>
                <div class="flex justify-between items-center">
                  <span class="text-xs bg-danger/10 text-danger px-2 py-1 rounded-full">
                    <i class="fa fa-exclamation-circle mr-1"></i> 32种相克药物
                  </span>
                  <a href="#" class="text-primary text-sm hover:underline">查看详情</a>
                </div>
              </div>
            </div>
            
            <!-- 药物卡片2 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
              <div class="p-4">
                <div class="flex justify-between items-start mb-3">
                  <div>
                    <h3 class="font-semibold text-neutral-800">氯吡格雷</h3>
                    <p class="text-xs text-neutral-500">抗血小板药</p>
                  </div>
                  <button class="text-warning transition-colors">
                    <i class="fa fa-star"></i>
                  </button>
                </div>
                <div class="space-y-2 mb-4">
                  <div class="flex items-center text-sm">
                    <span class="w-24 text-neutral-500">主要作用：</span>
                    <span class="text-neutral-700">抑制血小板聚集</span>
                  </div>
                  <div class="flex items-center text-sm">
                    <span class="w-24 text-neutral-500">常见剂型：</span>
                    <span class="text-neutral-700">片剂(75mg)</span>
                  </div>
                </div>
                <div class="flex justify-between items-center">
                  <span class="text-xs bg-danger/10 text-danger px-2 py-1 rounded-full">
                    <i class="fa fa-exclamation-circle mr-1"></i> 24种相克药物
                  </span>
                  <a href="#" class="text-primary text-sm hover:underline">查看详情</a>
                </div>
              </div>
            </div>
            
            <!-- 药物卡片3 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
              <div class="p-4">
                <div class="flex justify-between items-start mb-3">
                  <div>
                    <h3 class="font-semibold text-neutral-800">辛伐他汀</h3>
                    <p class="text-xs text-neutral-500">降血脂药</p>
                  </div>
                  <button class="text-neutral-400 hover:text-warning transition-colors">
                    <i class="fa fa-star-o"></i>
                  </button>
                </div>
                <div class="space-y-2 mb-4">
                  <div class="flex items-center text-sm">
                    <span class="w-24 text-neutral-500">主要作用：</span>
                    <span class="text-neutral-700">降低胆固醇</span>
                  </div>
                  <div class="flex items-center text-sm">
                    <span class="w-24 text-neutral-500">常见剂型：</span>
                    <span class="text-neutral-700">片剂(20mg)</span>
                  </div>
                </div>
                <div class="flex justify-between items-center">
                  <span class="text-xs bg-danger/10 text-danger px-2 py-1 rounded-full">
                    <i class="fa fa-exclamation-circle mr-1"></i> 41种相克药物
                  </span>
                  <a href="#" class="text-primary text-sm hover:underline">查看详情</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 药物相互作用案例 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
          <div class="p-4 border-b border-neutral-100 flex items-center justify-between">
            <h2 class="font-semibold text-neutral-700">常见药物相互作用案例</h2>
            <a href="#" class="text-primary text-sm hover:underline">更多案例</a>
          </div>
          <div class="divide-y divide-neutral-100">
            <!-- 案例1 -->
            <div class="p-4 hover:bg-neutral-50 transition-colors">
              <div class="flex flex-col md:flex-row md:items-start gap-4">
                <div class="flex-1">
                  <h3 class="font-medium text-neutral-800 mb-2">阿司匹林与华法林联用</h3>
                  <div class="flex flex-wrap gap-2 mb-3">
                    <span class="text-xs bg-danger/10 text-danger px-2 py-0.5 rounded-full">严重相互作用</span>
                    <span class="text-xs bg-neutral-100 text-neutral-600 px-2 py-0.5 rounded-full">出血风险</span>
                    <span class="text-xs bg-neutral-100 text-neutral-600 px-2 py-0.5 rounded-full">抗凝血药</span>
                  </div>
                  <p class="text-sm text-neutral-600 mb-3">
                    两者均有抗凝血作用，联用会显著增加出血风险，可能导致胃肠道出血、皮下瘀斑等。如需联用，应密切监测凝血功能并调整剂量。
                  </p>
                  <a href="#" class="text-primary text-sm hover:underline">查看详细分析</a>
                </div>
                <div class="md:w-32 lg:w-40">
                  <img src="https://picsum.photos/id/237/300/200" alt="药物相互作用图示" class="w-full h-24 object-cover rounded-lg">
                </div>
              </div>
            </div>
            
            <!-- 案例2 -->
            <div class="p-4 hover:bg-neutral-50 transition-colors">
              <div class="flex flex-col md:flex-row md:items-start gap-4">
                <div class="flex-1">
                  <h3 class="font-medium text-neutral-800 mb-2">辛伐他汀与红霉素联用</h3>
                  <div class="flex flex-wrap gap-2 mb-3">
                    <span class="text-xs bg-danger/10 text-danger px-2 py-0.5 rounded-full">严重相互作用</span>
                    <span class="text-xs bg-neutral-100 text-neutral-600 px-2 py-0.5 rounded-full">肌病风险</span>
                    <span class="text-xs bg-neutral-100 text-neutral-600 px-2 py-0.5 rounded-full">肝损伤</span>
                  </div>
                  <p class="text-sm text-neutral-600 mb-3">
                    红霉素会抑制辛伐他汀的代谢，导致其血药浓度升高，增加肌病和横纹肌溶解症的发生风险。建议避免联用或调整辛伐他汀剂量。
                  </p>
                  <a href="#" class="text-primary text-sm hover:underline">查看详细分析</a>
                </div>
                <div class="md:w-32 lg:w-40">
                  <img src="https://picsum.photos/id/96/300/200" alt="药物相互作用图示" class="w-full h-24 object-cover rounded-lg">
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 用药统计 -->
        <div class="bg-white rounded-xl shadow-sm p-6">
          <div class="flex items-center justify-between mb-6">
            <h2 class="font-semibold text-neutral-700">本月药物相克查询统计</h2>
            <div class="flex space-x-2">
              <button class="px-3 py-1 text-sm bg-primary text-white rounded-md">月度</button>
              <button class="px-3 py-1 text-sm bg-neutral-100 text-neutral-600 rounded-md hover:bg-neutral-200 transition-colors">季度</button>
              <button class="px-3 py-1 text-sm bg-neutral-100 text-neutral-600 rounded-md hover:bg-neutral-200 transition-colors">年度</button>
            </div>
          </div>
          <div class="h-64">
            <canvas id="drugInteractionChart"></canvas>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-white border-t border-neutral-200 mt-10">
    <div class="container mx-auto px-4 py-6">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="mb-4 md:mb-0">
          <p class="text-sm text-neutral-500">© 2023 药物作用与相克关系查询系统 - 医护专业版</p>
          <p class="text-xs text-neutral-400 mt-1">数据来源：国家药品监督管理局 最新更新：2023-11-15</p>
        </div>
        <div class="flex space-x-6">
          <a href="#" class="text-neutral-500 hover:text-primary text-sm transition-colors">使用指南</a>
          <a href="#" class="text-neutral-500 hover:text-primary text-sm transition-colors">数据更新日志</a>
          <a href="#" class="text-neutral-500 hover:text-primary text-sm transition-colors">联系我们</a>
          <a href="#" class="text-neutral-500 hover:text-primary text-sm transition-colors">隐私政策</a>
        </div>
      </div>
    </div>
  </footer>

  <!-- 回到顶部按钮 -->
  <button id="back-to-top" class="fixed bottom-6 right-6 bg-primary text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/90">
    <i class="fa fa-arrow-up"></i>
  </button>

  <!-- JavaScript -->
  <script>
    // 初始化图表
    document.addEventListener('DOMContentLoaded', function() {
      // 药物相克查询统计图表
      const ctx = document.getElementById('drugInteractionChart').getContext('2d');
      const chart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['抗生素类', '心血管药物', '神经系统药物', '消化系统药物', '激素类药物', '呼吸系统药物'],
          datasets: [{
            label: '查询次数',
            data: [1256, 985, 754, 632, 421, 389],
            backgroundColor: [
              'rgba(22, 93, 255, 0.7)',
              'rgba(22, 93, 255, 0.6)',
              'rgba(22, 93, 255, 0.5)',
              'rgba(22, 93, 255, 0.4)',
              'rgba(22, 93, 255, 0.3)',
              'rgba(22, 93, 255, 0.2)'
            ],
            borderColor: 'rgba(22, 93, 255, 1)',
            borderWidth: 1,
            borderRadius: 4
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              backgroundColor: 'rgba(255, 255, 255, 0.9)',
              titleColor: '#1D2129',
              bodyColor: '#4E5969',
              borderColor: '#E5E6EB',
              borderWidth: 1,
              padding: 10,
              boxPadding: 5,
              usePointStyle: true,
              callbacks: {
                label: function(context) {
                  return `查询次数: ${context.raw}`;
                }
              }
            }
          },
          scales: {
            y: {
              beginAtZero: true,
              grid: {
                color: 'rgba(0, 0, 0, 0.05)'
              }
            },
            x: {
              grid: {
                display: false
              }
            }
          }
        }
      });

      // 回到顶部按钮功能
      const backToTopButton = document.getElementById('back-to-top');
      
      window.addEventListener('scroll', function() {
        if (window.pageYOffset > 300) {
          backToTopButton.classList.remove('opacity-0', 'invisible');
          backToTopButton.classList.add('opacity-100', 'visible');
        } else {
          backToTopButton.classList.remove('opacity-100', 'visible');
          backToTopButton.classList.add('opacity-0', 'invisible');
        }
        
        // 导航栏滚动效果
        const header = document.getElementById('main-header');
        if (window.pageYOffset > 50) {
          header.classList.add('shadow');
        } else {
          header.classList.remove('shadow');
        }
      });
      
      backToTopButton.addEventListener('click', function() {
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      });
    });
  </script>
</body>
</html>